import React, { Component } from 'react';
import { Layout, Row, Col  } from 'antd';
import CommentAdd from "../comment-add/Comment-add";
import CommentList from "../comment-list/comment-list";
import PubSub from 'pubsub-js'
import 'antd/dist/antd.css';
import './app.css';
const { Header, Footer, Content } = Layout;

export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            commentList:[
                {id:1,name:'张锐',content:'react太他妈难了啦！！！！！'},
                {id:2,name:'谢丽',content:'今天太开心啦'},
                {id:3,name:'丁军',content:'php是世界上最好的语言，react渣渣'}
            ]
        }
        this.handleListadd = this.handleListadd.bind(this)
    }
    handleListadd(e){
        let datacommentList = this.state.commentList;
        let id = datacommentList.length+1
        console.log(e)
        
        let addjson = e
        addjson.id = id
        datacommentList.unshift(addjson)
        this.setState({
            commentList:datacommentList
        })
    }
    componentDidMount(){
        PubSub.subscribe('要删除的index',(msg,data)=>{
            console.log(msg)
            console.log(data)
            this.delect(data)
        })
    }
    delect(index){
        let datacommentList = this.state.commentList;
        datacommentList.splice(index, 1);
        this.setState({
            commentList:datacommentList
        })
    }

    render(){
        return (
            <div>
                <Layout>
                    <Header className="header">React 评论</Header>
                    <Content className="container">
                        <Row gutter={32}>
                            <Col className="gutter-row" span={10}>
                                <CommentAdd handleListadd={this.handleListadd} />
                            </Col>
                            <Col className="gutter-row" span={14}>
                                <CommentList commentList={this.state.commentList}></CommentList>
                            </Col>
                        </Row>
                    </Content>
                    <Footer className="footer">技术支持:xjbx代码公司</Footer>
                </Layout>
            </div>
        )
    }
}